<template>
  <div>
    <div class="tools-div">
      <el-button type="success" size="small" @click="handleExportCates">
        导出
      </el-button>
      <el-button type="primary" size="small" @click="handleImportCates">
        导入
      </el-button>
    </div>

    <!---懒加载的树形表格-->
    <el-table
      :data="list"
      style="width: 100%"
      row-key="id"
      border
      lazy
      :load="loadChildern"
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
    >
      <el-table-column prop="name" label="分类名称" />
      <el-table-column prop="imageUrl" label="图标" #default="scope">
        <img :src="scope.row.imageUrl" width="50" />
      </el-table-column>
      <el-table-column prop="orderNum" label="排序" />
      <el-table-column prop="status" label="状态" #default="scope">
        {{ scope.row.status == 1 ? '正常' : '停用' }}
      </el-table-column>
      <el-table-column prop="createTime" label="创建时间" />
    </el-table>
    <!-- 导入excel的对话框 -->
    <div>
      <el-dialog v-model="dialogImportVisible" title="导入" width="30%">
        <el-form label-width="120px">
          <el-form-item label="分类文件">
            <el-upload
              ref="upload"
              class="upload-demo"
              name="excel"
              action="http://localhost:8501/admin/product/category/import"
              :on-success="onUploadSuccess"
              :headers="headers"
            >
              <el-button type="primary">上传</el-button>
            </el-upload>
          </el-form-item>
        </el-form>
      </el-dialog>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useApp } from '@/pinia/modules/app'
import { ListCatesByPid, ExportCates } from '@/api/category'
import { ElMessage } from 'element-plus'
//上传对话框+上传组件
let dialogImportVisible = ref(false)
let headers = ref({
  token: useApp().authorization.token,
})
let upload = ref(null)
const onUploadSuccess = async r => {
  //上传成功的回调
  if (+r.code === 200) {
    ElMessage.success('上传成功')
    const { code, data } = await ListCatesByPid(0)
    if (+code === 200) {
      list.value = data
    }
  } else {
    ElMessage.error(r.message)
  }
  dialogImportVisible.value = false
}
//导入按钮事件函数
const handleImportCates = () => {
  //显示对话框
  dialogImportVisible.value = true
  //清空对话框上传组件的缓存
  upload.value.clearFiles()
}

//当前页面加载我们自己的分类数据：
//1、页面渲染时加载一级分类集合展示到树形图中，一级分类必须有hasChildren属性
//  使用父id=0可以查询
//2、点击一级分类时，在loadChildern中根据一级分类的id 查询它的下一级分类集合 通过resovle解析就可以展示到页面中
//  使用点击行分类id 当做父id进行查询

//页面渲染时 加载一级分类集合
onMounted(async () => {
  const { code, data } = await ListCatesByPid(0)
  if (+code === 200) {
    list.value = data
  }
})

// 定义list属性模型：
const list = ref([])

// 加载下一级数据的方法
const loadChildern = async (row, treeNode, resolve) => {
  //row代表要加载下一级分类集合的 父分类对象
  // console.log(row)
  // 向后端发送请求获取数据: 获取子分类集合
  const { code, data } = await ListCatesByPid(row.id)
  if (+code === 200) {
    // 返回数据： 将加载到的子分类集合 解析 封装为row的children属性值
    resolve(data)
  }
}
//导出按钮事件函数
const handleExportCates = () => {
  //异步执行 当响应成功时，then方法会被回调
  ExportCates().then(r => {
    //异步请求成功
    const blob = new Blob([r]) //将响应体数据流excel文件 转为Blob对象
    const link = document.createElement('a') //以原生dom的方式在页面中创建一个a标签对象
    link.href = window.URL.createObjectURL(blob) //设置a标签的超链接地址:本地文件下载的地址
    link.download = '商品分类.xlsx' // 设置下载文件的名称
    link.click() //模拟点击超链接地址
  })
}
</script>

<style scoped>
.search-div {
  margin-bottom: 10px;
  padding: 10px;
  border: 1px solid #ebeef5;
  border-radius: 3px;
  background-color: #fff;
}
.tools-div {
  margin: 10px 0;
  padding: 10px;
  border: 1px solid #ebeef5;
  border-radius: 3px;
  background-color: #fff;
}
</style>
